<script lang="ts" setup>
import { useTheme } from '@/hooks/useTheme'
import { useTabbarStore } from '@/store'
import { PageWraperProps } from './type'

defineProps(PageWraperProps)

const { theme, themeVars } = useTheme()

// const router = useRouter()

const tabbarStore = useTabbarStore()

themeVars.value = {
  colorTheme: '#00a9ff',
  tabsNavLineBgColor: 'red',
}

function handleChange({ value }) {
  tabbarStore.setTabbarItemActive(value)
  uni.switchTab({
    url: `/${value}`,
  })
  // router.pushTab({ name: value })
}

onShow(() => {
  // #ifdef APP-PLUS
  uni.hideTabBar()
  // #endif
})
</script>

<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: 'shared',
  },
}
</script>

<template>
  <wd-config-provider :theme-vars="themeVars" :theme="theme">
    <wd-notify />
    <wd-toast />
    <wd-message-box />
    <privacy-popup />
    <slot />
    <wd-tabbar
      :model-value="tabbarStore.getActive.name"
      custom-class="bg-white"
      bordered safe-area-inset-bottom placeholder fixed @change="handleChange"
    >
      <wd-tabbar-item
        name="pages/index/index"
        :value="tabbarStore.getTabbarItemValue('pages/index/index')"
        title="首页"
        icon="home"
      />
      <wd-tabbar-item
        name="pages/course/list"
        :value="tabbarStore.getTabbarItemValue('pages/course/course-list')"
        title="公需课程" icon="list"
      />
      <wd-tabbar-item
        name="pages/profile/index"
        :value="tabbarStore.getTabbarItemValue('pages/profile/index')"
        title="个人中心" icon="user"
      />
    </wd-tabbar>
  </wd-config-provider>
</template>
